<!doctype html>
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>dragit - example</title>
	<meta name="viewport" content="width=device-width">  
	<style>
		#main {
			position: relative;
			left: 30px;
			top: 40px;
		}

		#draggy {
			display: inline-block;
			border: 1px solid red;
			position: absolute;
			top: 0;
			left: 0;
		}

		html,
		body {
			height: 100%;
			cursor: default;
		}
	</style>
</head>
<body>

<div id="main">
	<p id="draggy">Draggy</p>
</div>

<!-- script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script -->
<script>window.jQuery || document.write('<script src="../../_jquery/jquery-1.7.1.min.js"><\/script>')</script>
<script src="../dragit.jquery.js"></script>

<script>
;(function($, window, document, undefined) {
$(function() {

var $draggy = $('#draggy')
	.dragit()
	.bind('dragit_start', function(e, p) {
		// Start code
	})
	.bind('dragit_drag', function(e, p) {
		$draggy
			.css({
				left: p.elementStartX + p.totalX,
				top: p.elementStartY + p.totalY
			});
	})
	.bind('dragit_drop', function(e, p) {
		// Drop code
	})

});
})(jQuery, window, document);
</script>

</body>
</html>